import { HTMLProps } from 'react';
import cls from 'classnames';
import styles from './index.module.scss';

export type color = string;

export interface LineProps extends HTMLProps<any> {
  color?: color;
}

export const StaightLine = ({ color, className, ...others }: LineProps) => {
  color = color || '#ffffff';

  return (
    <div className={cls(styles.straight, className)} {...others}>
      <div className={styles.hoz} style={{ backgroundColor: color }}/>
      <div className={styles.slope}>
        <div className={styles.slopeInner}>
          <div className={styles.slopeBlock}>
            {Array(16).fill(0).map((_, idx) =>
              <div key={idx} style={{ backgroundColor: color }}></div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
